<!-- Record list item: List Small -->
<div class="mb-4">
  <div
    class="flex sm:flex-row flex-col p-5 items-center sm:justify-start justify-center text-center sm:text-left bg-white hover:bg-gray-100 border-gray-200 border rounded-sm transition duration-200"
  >
    <div class="flex-grow">
      <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
        {{ record.title }}
      </h1>
      <p
        class="leading-relaxed mb-3 text-gray-700 text-sm whitespace-pre-line clamp-3"
      >
        {{ record.abstract }}
      </p>

      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <a
          class="inline-flex items-center md:mb-2 lg:mb-0 hover:underline"
          [href]="record.metadataUrl"
        >
          <span translate>record.more.details</span>
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
